<template>
  <div class="about">
    <header>
      <el-button type="primary" @click="add">添加</el-button>
    </header>
    <el-table
      ref="multipleTable"
      :data="list"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <!-- @selection-change="handleSelectionChange" -->
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="username" label="商品名称"> </el-table-column>
      <el-table-column prop="price" label="单价"> </el-table-column>
      <el-table-column label="数量">
        <template slot-scope="scope">
          <el-input-number
            v-model="scope.row.count"
            :min="1"
            :max="10"
            label="描述文字"
            size="mini"
          ></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="小计">
        <template slot-scope="scope">
          ￥{{ scope.row.count * scope.row.price }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="warning" size="small" @click="del(scope.$index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <footer>
      <span>总数：{{ num }}</span>
      <span>总价：{{ sum }}</span>
    </footer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      data: [
        "苹果",
        "香蕉",
        "梨",
        "火龙果",
        "猕猴桃",
        "草莓",
        "青芒",
        "柚子",
        "桃",
        "柿子",
        "核桃",
        "葡萄",
        "山楂",
        "红枣",
        "榴莲",
        "甘蔗",
        "人参",
      ],
    };
  },
  methods: {
    add() {
      var index = Math.floor(Math.random() * this.data.length);
      var num = Math.floor(Math.random() * (45 - 5 + 1) + 5);
      var item = {
        username: this.data[index],
        price: num,
        count: 1,
      };
      this.list.push(item);
    },
    del(index) {
      this.list.splice(index, 1);
    },
  },
  computed: {
    sum() {
      var sum = 0;
      this.list.forEach((item) => {
        sum += item.count * item.price;
      });
      return sum;
    },
    num() {
      var num = 0;
      this.list.forEach((item) => {
        num += item.count;
      });
      return num;
    },
  },
};
</script>
<style lang="scss" scoped>
.about {
  width: 1000px;
  margin: 0 auto 10vh;
  header {
    margin: 10px 0;
  }
}
</style>